<!--
 * @Author: 王灿
 * @Date: 2019-11-21 22:04:26
 * @LastEditTime: 2019-12-14 21:54:09
 * @Description: 商品sku
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-sku\index.vue
 -->
<template>
  <div class="commodity-sku">
    <!-- 新增按钮 -->
    <jq-title :title="commodityName" @addTableRow="onTableRow" />
    <!-- sku列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="commodity-sku__table">
        <!-- sku名称 -->
        <el-table-column prop="tagName" label="sku名称"></el-table-column>
        <!-- sku说明 -->
        <el-table-column prop="skuExplain" label="sku说明"></el-table-column>
         <!-- sku价格 -->
        <el-table-column prop="price" label="sku价格"></el-table-column>
         <!-- sku库存 -->
        <el-table-column prop="stock" label="sku库存"></el-table-column>
        <el-table-column label="sku备注">
          <template slot-scope="scope">
            <span> {{ scope.row.remark || '--' }} </span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="onEditSku(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 新增/编辑 -->
    <el-dialog
      :title="elitle"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="600px"
      append-to-body>
      <sku-operate :productId="productId" :row="row"  @addTableRow="onTableRow"  @onChangeRefresh="onChangeRefresh"/>
    </el-dialog>
  </div> 
</template>

<script>
import { getSku, getSkuAdd } from '@/api/commodity'
import JqTitle from '@/components/jq-title/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import SkuOperate from './sku-operate/index.vue'
export default {
  name: 'CommoditySku',
  components: { JqTitle, JqPage, SkuOperate },
  props: {
    // 商品Id
    productId: {
      type: [Number, String],
      default: 0
    },
    // 商品名称
    commodityName: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      // 新增/编辑 窗口开关
      elitle: '新增',
      isShow: false,
      row: {},
      // 刷新table开关
      isRefresh: false
    }
  },
  watch: {
    // 监听商品变化
    productId() {
      this.onGetSkuList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetSkuList()
    },
    // 监听页码变化
    pageNum() {
      this.onGetSkuList()
    },
    // 监听isRefresh
    isRefresh() {
      this.onGetSkuList()
    }
  },
  created() {
    this.onGetSkuList()
  },
  methods: {
    // 获取商品sku
    onGetSkuList() {
      getSku({
        productId: this.productId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 新增sku
    onTableRow(data) {
      this.isShow = data.isShow
      this.elitle = "新增"
      this.row = {}
      this.isRefresh = false
    },
    // 编辑sku
    onEditSku(row) {
      this.elitle = "编辑"
      this.row = row
      this.isShow = true
      this.isRefresh = false
    },
    // 父子组件传值
    onChangeRefresh() {
      this.isShow = false
      this.isRefresh = true
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    }
  }
}
</script>

<style lang="scss">
.commodity-sku {
  height: 100%;
  @include column;
  .commodity-sku__table {
    border: 1px solid #ddd;
  }
  .el-table td, .el-table th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
  }
}
</style>